<template>
  <div class="film">
    <Header title='时间胶囊—别让地球"碳"息' />

    <div class="nav-btn">
      <div class="btn-left">
        <a @click.prevent="openSlide">
          <div class="btn-list">☆☆幻灯片放映☆☆</div>
        </a>
      </div>
      <div class="btn-right">
        <a @click.prevent="type">
          <div class="btn-list">☆☆放映谢幕词☆☆</div>
        </a>
      </div>
    </div>

    <div class="timeline-con">
      <button class="left-btn" @click="scrollTimeline(1)">
        <font-awesome-icon :icon="['fas', 'backward']" />
      </button>
      <div id="timeline-container">
        <vue-horizontal-timeline
          :items="items"
          :title-substr="12"
          timeline-background="transparent"
          line-color="rgba(14, 252, 242, 0.2)"
          content-class="content-style"
          title-class="title-style"
          clickable
        />
      </div>
      <button class="right-btn" @click="scrollTimeline(-1)">
        <font-awesome-icon :icon="['fas', 'forward']" />
      </button>
    </div>

    <div class="music-container">
      <vueAplayer
        ref="aplayer"
        :music="audio[0]"
        :list="audio"
        repeat="repeat-all"
        list-folded
        autoplay
      />
    </div>
  </div>
</template>

<script>
import { debounce } from 'lodash-es'
// 音频
import vueAplayer from 'vue-aplayer'
import { FluxControls, FluxPreloader, VueFlux } from 'vue-flux'
// 时间线
import VueHorizontalTimeline from 'vue-horizontal-timeline'
// 打字机
import typewriter from 'vue-type-writer'

export default {
  components: {
    Header: () => import('@/components/header'),
    vueAplayer,
    VueHorizontalTimeline
  },
  data() {
    return {
      audio: [
        {
          title: 'Awaken the Dawn',
          artist: 'Stanton Lanier',
          src: 'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/audio/Awaken%20the%20Dawn.mp3',
          pic: 'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/image/bear.jpg',
          lrc: '',
          theme: '#20b2aa'
        },
        {
          title: 'onceagain',
          artist: '佚名',
          src: 'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/audio/onceagain.mp3',
          pic: 'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/image/vibrant.jpg',
          lrc: '',
          theme: '#20b2aa'
        }
      ],
      items: [
        {
          title: '斯皮克斯金刚鹦鹉',
          content:
            '斯皮克斯金刚鹦鹉是生活在巴西北部地区的一种漂亮的蓝色鹦鹉，巴西盛产各类热带鹦鹉，斯皮克斯金刚鹦鹉被认为是其中最漂亮的鹦鹉之一。但也因此遭到了大量的捕捉，人们对其趋之若鹜，争相饲养。大量的捕捉，同时随着人口数量的增长，很多热带雨林遭到了砍伐，破坏了它们的栖息地。另外当地引入了外来物种非洲蜜蜂，导致了斯皮克斯金刚鹦鹉的死亡。2000年的时候，人们发现了最后一只野生的斯皮克斯金刚鹦鹉，随后再也没有出现过。于2000年正式宣布灭绝'
        },
        {
          title: '南极巨型酸浆虫',
          content:
            '一种原生生物，存在于南极洲的一些湖泊中。它属于单细胞真菌，可以通过光合作用产生能量。近年来气候变化导致南极半岛的温度上升，冰盖融化引发了南极巨型酸浆虫数量剧增的现象。这种大量繁殖的酸浆虫会引起湖水PH值降低，从而对其他水生生物造成威胁。，因全球变暖和南极半岛上升的温度而在 2010 年濒临灭绝。'
        },
        {
          title: '白翘唇鳕鱼',
          content:
            '生活在寒冷的水域，属于底栖鱼类，以贝类、虾类和小鱼为食。由于过度捕捞和气候变化等因素的影响，白翘唇鳕鱼的数量在过去几十年内已经大幅下降。近年来，虽然欧盟和北美国家采取了一系列严格的措施来限制对这种鱼的捕捞，以帮助保护白翘唇鳕鱼的种群并促进其有序恢复，但由于北极海冰大量减少导致其栖息地逐渐消失，从而在 2010 年面临断崖式的减少。'
        },
        {
          title: '蓝尾黑地鸫',
          content:
            '蓝尾黑地鸫以其华丽的羽毛和精心设计的巢穴而闻名。雄性蓝尾黑地鸫会在树上或树丛里建造一个集美观和实用性于一身的圆顶形巢穴，使用树叶、草和其他材料装饰巢穴，并将蓝色或紫色的物品放在入口附近。这些特征使得蓝尾黑地鸫的巢穴成为了令人赞叹的艺术品。是古巴特有的一些鸟种之一，由于气候变化对其高山栖息地的影响而在 2010 年濒临灭绝。'
        },
        {
          title: '突尾鲸',
          content:
            '生活在印度洋西部的鲸类，由于气候变化对其主要食物来源的减少和海洋污染导致其数量锐减，从而在 2010 年被列为濒临灭绝。'
        },
        {
          title: '艾氏陆地龟',
          content:
            '该物种曾经是加拉帕戈斯群岛特有的一种龟，由于升高的温度和干旱气候等因素，其捕食、繁殖和生存条件恶化，从而在 2012 年灭绝。'
        },
        {
          title: '玻利维亚水獭 ',
          content:
            '这种南美洲的物种正面临着被疾病和干旱气候、洪水和旅游业等人类活动威胁的危险，从而在 2013 年被列为极度濒危物种之列。'
        },
        {
          title: '彩虹扇贝',
          content:
            '彩虹扇贝是太平洋岛屿的一种珊瑚礁生物，在过去的数十年里面临全球气候变化和水体环境污染的威胁，从而在 2014 年被列为濒危物种。'
        },
        {
          title: '非洲黑嘴天鹅',
          content:
            '这种非常受欢迎的水鸟由于野火频发和气候变化导致其栖息地持续受到威胁，从而在 2016 年被列为濒临灭绝物种之一。'
        },
        {
          title: '蓝灰指鹿尾草',
          content:
            '这种美国加州特有的植物正面临着气候变化、极端干旱和研究活动等问题的影响，从而在 2016 年被列为濒临灭绝物种。'
        },
        {
          title: '灰鳍海豹',
          content:
            '这种北极海洋哺乳动物由于北极冰层的持续减少而面临生存威胁，并已在 2017 年列为濒危物种。 '
        },
        {
          title: '昆士兰火箭燕',
          content:
            '这种澳大利亚昆士兰州的鸟类正面临因严重的气候变化导致的热浪和干旱等极端天气条件而濒临灭绝，从而在 2017 年被列为濒危物种。'
        },
        {
          title: '纷背红蜘蛛',
          content:
            '这种澳大利亚的小型蜘蛛由于气候变化和人类活动导致其栖息地和食物来源减少，从而在 2017 年被列为濒危物种。'
        },
        {
          title: '木棉鸟',
          content:
            '这种居住在斐济群岛的小型珍贵鸟类正面临环境破坏、栖息地流失和贸易活动等多重威胁而濒临灭绝，从而在 2018 年被列为濒危物种。'
        },
        {
          title: '摩纳哥长袜鼠',
          content:
            '这种西非特有的啮齿动物由于栖息地流失、干旱和荒漠化等原因而在 2018 年被列为濒临灭绝。'
        },
        {
          title: '倭油麻里',
          content:
            '这种中国四川特有的树蛙由于全球气候变暖、森林砍伐和栖息地丧失等原因而在 2018 年被列为濒危物种。'
        },
        {
          title: '北极熊',
          content:
            '这种白熊由于北极冰层持续减少导致其栖息地受到影响，从而在 2018 年被列为濒危物种。'
        },
        {
          title: '印度海牛',
          content:
            '这种广泛分布在印度洋和太平洋海域的海洋哺乳动物正面临栖息地丧失和人类活动对其食物来源的影响而濒临灭绝，并已在 2019 年列为濒危物种。'
        }
      ],
      timeline: ''
    }
  },
  mounted() {
    this.$refs.aplayer.play()
  },
  beforeDestroy() {
    this.$modal.hideAll()
  },
  methods: {
    scrollTimeline: debounce(function (dir) {
      this.timeline = document
        .querySelector('.vue-horizontal-timeline')
        .querySelector('.timeline')
        .querySelector('ol')
      const LeftDist = this.timeline.offsetLeft
      if (dir > 0) {
        if (LeftDist < -50) this.timeline.style.left = LeftDist + 100 + 'px'
      } else {
        if (LeftDist > -2500) this.timeline.style.left = LeftDist - 100 + 'px'
      }
    }, 100),
    openSlide() {
      if (document.body.clientWidth <= 1000) {
        alert('当前屏幕尺寸过小，请更换设备查看')
        return
      }
      this.$modal.show(
        {
          template: `
          <vue-flux
          :options="vfOptions"
          :images="vfImages"
          :transitions="vfTransitions"
          ref="slider"
          >
            <template v-slot:preloader>
              <flux-preloader />
            </template>
            <template v-slot:controls>
              <flux-controls />
            </template>
          </vue-flux>
        `,
          components: {
            // 轮播配套
            VueFlux,
            FluxControls,
            FluxPreloader
          },
          data: () => ({
            vfOptions: {
              autoplay: true
            },
            vfImages: [
              'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/climateImg/1.jpg?x-oss-process=style/process',
              'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/climateImg/2.jpg?x-oss-process=style/process',
              'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/climateImg/3.jpg?x-oss-process=style/process',
              'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/climateImg/4.jpg?x-oss-process=style/process',
              'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/climateImg/5.jpg?x-oss-process=style/process',
              'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/climateImg/6.jpg?x-oss-process=style/process',
              'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/climateImg/7.jpg?x-oss-process=style/process',
              'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/climateImg/8.jpg?x-oss-process=style/process'
            ],
            vfTransitions: [
              'explode',
              'waterfall',
              'wave',
              'Book',
              'Cube',
              'Fall'
            ]
          })
        },
        {},
        {
          height: '425px',
          width: '800px',
          draggable: true
        }
      )
    },
    type() {
      this.$modal.show(
        {
          template: `
          <typewriter
          ref="typewriter"
          class="type-writer"
          :interval="200"
          :style="{ visibility: status }"
          >
            <div class="curtainCall">
              <p>广袤天空下，地球叹息是否听见？</p>
              <p>我们在同一片天空下徜徉，却在气候变化中挣扎求生！</p>
              <p>你是否听见冰雪消融之声，你是否看见灰蒙天空之景？</p>
              <p>我们的地球母亲啊！你是否还在哭泣</p>
              <p>重拾可持续，我们能否保护你和我们的伙伴。</p>
              <p>唤醒良知，希望未来绿洲遍布，空气沁人心脾，北极熊朋友重回生的家园！</p>
            </div>
          </typewriter>
        `,
          components: {
            typewriter
          },
          data: () => ({
            status: 'hidden'
          }),
          mounted() {
            this.status = 'visible'
            this.$refs.typewriter.$emit('typewrite')
          }
        },
        {},
        {
          height: '70%',
          width: '70%',
          draggable: true
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/topBtnList.scss';

.film {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url('https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/image/bg.jpg?x-oss-process=style/process')
    no-repeat center;
  background-size: cover;

  @include topBtn;

  .timeline-con {
    display: flex;
    align-items: center;
    width: 90%;
    height: 90%;
    margin: 0 auto;

    .left-btn,
    .right-btn {
      padding: 15px 20px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      cursor: pointer;
      background-color: rgb(14 252 255 / 50%);
      border-width: 0;
      border-radius: 2em;
      box-shadow: 1px 5px 0 0 rgb(14 252 255 / 22%);
      transition: 0.1s ease;

      &:hover {
        box-shadow: 1px 9px 0 0 rgb(14 252 255 / 22%);
        transform: translateY(-4px);
      }

      &:active {
        box-shadow: 0 0 0 0 rgb(14 252 255 / 22%);
        transform: translateY(4px);
      }
    }

    #timeline-container {
      width: 80%;
      margin: 0 auto;
      overflow: hidden;

      .vue-horizontal-timeline {
        ::v-deep .timeline {
          // position: relative;
          ol {
            position: relative;

            li {
              &:nth-child(even) {
                .time {
                  &::before {
                    // border: 1px solid red;
                    // background: red;
                    border-color: transparent transparent transparent
                      rgb(14 252 255 / 22%);
                  }

                  border-radius: 0 12px 12px;
                }
              }

              &:nth-child(odd) {
                .time {
                  &::before {
                    // border: 1px solid red;
                    // background: red;
                    border-color: rgb(14 252 255 / 22%) transparent transparent
                      transparent;
                  }

                  border-radius: 12px 12px 12px 0;
                }
              }
            }
          }
        }

        ::v-deep .time {
          background-color: rgb(14 252 255 / 22%);
          backdrop-filter: blur(24px) saturate(196%);
        }

        ::v-deep .add-step {
          &::after {
            background-color: transparent;
            border-color: rgb(14 252 255 / 22%);
          }
        }

        // 标题样式
        ::v-deep .title-style {
          font-size: 20px;
          // color: #fff;
          color: rgb(14 252 255 / 50%);
        }

        // 内容样式
        ::v-deep .content-style {
          height: 100px;
          overflow: auto;
          font-size: 12px;
          color: rgb(14 252 255 / 50%);
          text-indent: 2em;
          border: 2px solid rgb(14 252 242 / 20%);
          border-radius: 5px;
        }

        // 修改滚动条样式
        ::-webkit-scrollbar-track {
          background: rgb(0 0 0 / 10%);
          border-radius: 0;
        }

        ::-webkit-scrollbar {
          width: 3px;
          height: 6px;
          appearance: none;
        }

        ::-webkit-scrollbar-thumb {
          cursor: pointer;
          background: rgb(14 252 242 / 20%);
          border-radius: 5px;
          transition: color 0.2s ease;
        }
      }
    }
  }

  .music-container {
    position: fixed;
    right: 2%;
    bottom: 2%;
    width: 30%;
    opacity: 0.3;
  }
}
</style>
